import { rechargePeirodAccount } from '@/api/company'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import renderModal, {
    getModelValue,
    initModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
import toNative from '@/utils/toNative'
import {
    getKeyToEnum,
    PayModeCnEnum,
} from '@/const/enum'
import { convertCurrency, getReceiptData } from '@/utils/util'
import type { CompanyInfoDto, PeriodInfoDto } from '@/api/company/types'
import { message } from 'ant-design-vue'

@Component
export class DialogRecharge extends Render {
    @Prop({ default: false }) show!: boolean
    @Prop() basicData!: PeriodInfoDto
    @Prop() companyBasicInfo!: CompanyInfoDto

    @Emit('update:show')
    showChange(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.rechargeFormConfig.title = `${this.companyBasicInfo.companyName}长期保充值窗口`
        this.rechargeFormConfig.show = this.show

        // if (this.show) {
        if (this.companyBasicInfo.channelId) {
            this.rechargeFormConfig.items.receiptId.options = await getReceiptData(
                this.companyBasicInfo.channelId
            )
        }
        console.log(8888, this.basicData)
        //     // initModelValue(this.formConfig, this.basicInfo)
        // }
    }

    @Watch('rechargeFormConfig.items.payMoney.value', { deep: true })
    handleWatchPayMoney(newval: number | string) {
        this.rechargeFormConfig.items.hint.params.prefix = newval ? (
            <div class="text-red text-xl">{convertCurrency(newval)}</div>
        ) : (
            <></>
        )
        this.rechargeFormConfig.items.hint.hidden = !newval
    }

    // 充值弹框
    rechargeFormConfig = this.initRechargeFormConfig() as FormModalDto
    initRechargeFormConfig() {
        return {
            title: '',
            width: '400px',
            theme: 'light',
            show: false,
            items: {
                rechargeAmount: {
                    name: '充值金额',
                    element: 'inputNumber',
                    required: true,
                    defaultValue: 0,
                    params: {
                        min: 0
                    }
                },
                receiptId: {
                    name: '收款账户',
                    element: 'select',
                    optionsType: '',
                    required: true
                },
                payMode: {
                    name: '付款方式',
                    element: 'select',
                    optionsType: '',
                    required: true,
                    options: getKeyToEnum(PayModeCnEnum)
                },
                voucherUrl: {
                    name: '上传凭证',
                    element: 'upload',
                    type: 'text',
                    required: true,
                    params: {
                        autoUpload: false,
                        accept: '.png,.jpg,.jpeg',
                        suffix: (
                            <div class="text-sm text-gray">
                                大小限制5MB，支持png、jpeg、jpg格式文件
                            </div>
                        )
                    }
                }
            },
            complete: async () => {
                const data = getModelValue(this.rechargeFormConfig)
                data.companyId = this.basicData.companyId
                if (data.voucherUrl?.length && Array.isArray(data.voucherUrl)) {
                    const base64 = data.voucherUrl[0].base64
                    data.voucherUrl = base64.split(';base64,')[1]
                }
                await rechargePeirodAccount(data)
                message.success('更新成功')
                this.rechargeFormConfig.show = false
                this.showChange(false)
                this.handleRefresh()
            },
            cancel: () => {
                this.rechargeFormConfig.show = false
                this.showChange(false)
            },
            init: () => {
                initModelValue(this.rechargeFormConfig)
            }
        } as FormModalDto
    }

    render() {
        return <div>{renderModal(this.rechargeFormConfig)}</div>
    }
}

export default toNative<
    { basicData: PeriodInfoDto; companyBasicInfo: CompanyInfoDto },
    { refresh: () => void }
        >(DialogRecharge)
